import React, { useEffect, useRef, useState } from 'react'
import * as echarts from "echarts"
import { getNumber } from '../request/instance'
const App = function () {
    let [total, settotal] = useState('')
    let [teaching, setTeaching] = useState('')
    let [tutorial, setTutorial] = useState('')
    let [cour, setCour] = useState('')
    let [data, setData] = useState([])
    let main = useRef()
    useEffect(() => {
        getNumber().then((ren) => {
            setData(ren.data.data)
            settotal(ren.data.total)
            setTeaching(ren.data.teaching)
            setTutorial(ren.data.tutorial)
            setCour(ren.data.cour)
            let myecharts = echarts.init(main.current)
            let options = {
                title: {
                    text: '备课质量统计',
                    left: 'center'
                  },
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'left'
                  },
                series: [
                    {
                        type: "pie",
                        center: ["50%", "50%"],
                        radius: [0, 200],
                        data: ren.data.data
                    }
                ]
            }
            myecharts.setOption(options)
        })

    }, [])
    return <>
        <div style={{
            width: '1300px', height: '1000px',
            backgroundColor: 'rgb(237, 237, 237)', margin: '20px', display: 'flex',
            justifyContent: 'space-evenly',
            flexDirection: 'column',
            alignItems: 'center'
        }}>
            <div style={{
                width: '1180px', height: '800px', backgroundColor: 'rgb(255, 255, 255)',
                borderRadius: '20px', padding: '10px', display: 'flex', flexDirection: 'column',
                justifyContent: 'space-evenly'
            }}>
                <div style={{
                    width: '100%', height: '280px', display: 'flex',
                    justifyContent: 'space-evenly', alignItems: 'center'
                }}>
                    <div style={{
                        width: '260px', height: '220px', fontSize: '21px', display: 'flex', flexDirection: 'column',
                        justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgb(224, 224, 224)', borderRadius: '10px'
                    }}>
                        <p>备课总数量</p>
                        <p>{total}</p>
                    </div>
                    <div style={{
                        width: '260px', height: '220px', fontSize: '21px', display: 'flex', flexDirection: 'column',
                        justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgb(224, 224, 224)', borderRadius: '10px'
                    }}>
                        <p>教案数</p>
                        <p>{teaching}</p>
                    </div>
                    <div style={{
                        width: '260px', height: '220px', fontSize: '21px', display: 'flex', flexDirection: 'column',
                        justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgb(224, 224, 224)', borderRadius: '10px'
                    }}>
                        <p>导学案数</p>
                        <p>{tutorial}</p>
                    </div>
                    <div style={{
                        width: '260px', height: '220px', fontSize: '21px', display: 'flex', flexDirection: 'column',
                        justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgb(224, 224, 224)', borderRadius: '10px'
                    }}>
                        <p>课件数</p>
                        <p>{cour}</p>
                    </div>
                </div>
                <div style={{ width: '100%', height: '500px' }} ref={main}>

                </div>
            </div>
        </div>
    </>
}

export default React.memo(App);